﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用table制作的进度条</title>
    <script type="text/javascript">
        var i = 0;
        var timer;
        function Progress(){
            if(i === 200){
                clearTimeout(timer);
                return;
            }
            i = (i<200) ? (i + 4) : 0;
            myBar.style.setExpression("width","i","javascript");//设置滚动条的宽度
            percentBar.innerText=i/2+"%";                       //设置进度的显示
            timer=setTimeout("Progress()",250);//设置定时器，每隔250毫秒增加一次进度
        }
    </script>
</head>
<body onload="Progress()">
<br>
<table align="center" width="50%">
    <tr><td><span id="myBar" style="background-color:blue"></span></td></tr>
    <tr><td><span width="%100" id="percentBar"></span></td></tr>
</table>
</body>
</html>